<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			第一个模糊查询：<input type="text" @input="handleInput()" v-model="mytext">
			第二个模糊查询：<input type="text" @input="handleInput1" v-model="mytext1"/>
			<ul>
				<li v-for="item in datalistTemp" :key="item">
					{{item}}
				</li>
			</ul>
			<ul>
				<li v-for="(item,index) in st1" :key="index">{{item.nam}}</li>
			</ul>
		</div>
		<script>
			var xm=new Vue({
				el:'#app',
				data: {
					mytext: "",
						mytext1: "",
					datalist: ["aaa", "add", "bbb", "bbc", "ccc", "ddd", "abd"],
					datalistTemp: ["aaa", "add", "bbb", "bbc", "ccc", "ddd", "abd"],
					st:[
						{id:1,nam:"夏东海"},
						{id:1,nam:"马冬梅"},
						{id:1,nam:"任嘉伦"},
						{id:1,nam:"周杰伦"},
						{id:1,nam:"马上来"}
					],
					st1:[
						{id:1,nam:"夏东海"},
						{id:1,nam:"马冬梅"},
						{id:1,nam:"任嘉伦"},
						{id:1,nam:"周杰伦"},
						{id:1,nam:"马上来"}
					],
					
				},
				methods: {
					handleInput() {
						this.datalistTemp = this.datalist.filter(item => item.includes(this.mytext))
					},
					handleInput1() {
						this.st1 = this.st.filter(item => item.nam.indexOf(this.mytext1)>-1)
					}
				},
				
			})
		</script>
	</body>
</html>